<style>
    #creation_steps{
        padding: 10px;
        text-align: center;
    }
    #steps_number{
        margin-bottom: 5px;
        padding: 0px 10%;
    }
    #steps_number span{
        display: inline-block;
        width: 33%;
        height: 75px;
        float: left;

    }
    .clear{
        clear:  both;
    }
    #steps_number span a{
        display: inline-block;
        position: relative;
        padding-top: 25px;
        width: 100px;
        height: 50px;
        text-decoration: none;
        font-size: large;
        font-weight: bold;
        color: white;
        background: #c4d52b;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

    }
    #steps_number span a.current{
        background: #3498db;
    }
    #steps-content{
        overflow: hidden;
        height: 500px; 
        margin-top: 5px;
        border: solid #CCC 1px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;

    }
    #steps-content div#step1, #steps-content div#step2, #steps-content div#step3{
        width: 99%;
        float: left;
        height: 497px;
        padding: 1px 3px;
    }
    #step2{
        text-align: left;
    }
    #steps_number #bar{
        height: 10px;
        position: relative;
        top:40px;
        margin:0px 16%; 
        background: #c4d52b;
    }
    #steps_number #bar div{
        height: 10px;
        width: 0px;
        background: #3498db;
    }
    #liste_menu{
        margin-top: 5px;
        margin-left: 2px;
        width: 19%;
        height: 80%;
        float: left;
        background: #002166;
        display: inline-block;
    }
    #liste_menu ul{
        list-style: none;
        margin: 0;
    }

    #liste_menu ul li{
        height: 40px;
        margin-top: 5px;
        background: #c4d52b;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
        text-align: left;
        padding-left: 4px;
    }
    #liste_menu ul li a{
        text-decoration: none;
        color:white;
        height: 40px;
        display: table-cell;
        vertical-align: middle 
    }
    #uploader_att{
        margin-top: 5px;
        width: 80%;
        height: 80%;

        display: inline-block;
    }
    #error_zone{
        text-align: left;
        padding: 2px 5px;
    }
    #loading{
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 100px;
    }
.upload-progress{
	width: 80%;
	height: 15px;
	border: 1px #34495e solid;
	margin:auto;
	margin-top: 80px;
	display: none;
}
.upload-progress .progress-bar{
	width: 0px;
	height: 100%;
	background: #2ecc71;
}
</style>
<script>
  var current_step = "#step1";
</script>

<div class="mws-panel grid_8">
    <div class="mws-panel-header">
        <span><i class="icon-magic"></i>Création d'u nouveau projet</span>
    </div>

    <div class="mws-panel-body no-padding">
        <div id="creation_steps">
            <div id="steps_number">
                <div id="bar">
                    <div ></div>
                </div>
                <span  ><a href="#step1" class="current" >Etape 1</a></span>
                <span ><a href="#step2" >Etape 2</a></span>
                <span  ><a href="#step3" >Etape 3</a></span>
            </div>
            <div class="clear"></div>

            <div id="steps-content">
                <div id="error_zone">
                </div>
                <div id="step1">


                    <h2>Upload des Resources</h2>
                    <?php echo form_open_multipart(base_url('project/upload_resources'), array('id' => 'form-upload-svg', 'class' => 'mws-form')); ?>
                    <!--<form class="mws-form" action="<?= base_url('projet/upload_resources') ?>" id="">-->
                    <div class="mws-form-inline">
                        <div class="mws-form-row">
                            <label class="mws-form-label">Nom du projet</label>
                            <div class="mws-form-item">
                                <input type="text" name="projname" class="large">
                            </div>
                        </div>
                        <div class="mws-form-row">
                            <label class="mws-form-label">Logo (jpg |png)</label>
                            <div class="mws-form-item">
                                <input type="file" name="logofile" >
                            </div>
                        </div>
                        <div class="mws-form-row">
                            <label class="mws-form-label">Resource (zip)</label>
                            <div class="mws-form-item">
                                <input type="file" name="resfile" >
                            </div>
                        </div>
                    </div>
                    </form>
                    <div class="mws-button-row">
                        <button type="button" class="btn" disabled="disabled">Précedent</button>
                        <button type="button" class="btn" id="next_step1">Suivant</button>
                    </div>
                    
                    <div class="upload-progress">
                    	<div class="progress-bar"></div>
                    </div>

                </div>

                <div id="step2">
                    <div id="loading">
                        <h2>Chargement en cours...</h2>
                        <?= img('loading.gif', array('alt' => 'loading...')); ?>";
                    </div>
                </div>


                <div id="step3">
                    <div id="loading">
                        <h2>Chargement en cours...</h2>
                        <?= img('loading.gif', array('alt' => 'loading...')); ?>";
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

<div style="display: none;">

    <form action="<?= base_url('project/upload_resources') ?>" method="post" id="uploadform" enctype="multipart/form-data">
        <input type="file" name="resfile" id='resfile' />  
        <input type="submit" id="submit_upload" />
    </form>
</div>
<?php
js('js/libs/jquery-1.8.3.min')
?>
<script>
    jQuery(document).ready(function()
    {
        var project_name = null;
        $('#steps_number span a').click(function(event) {
            event.preventDefault();
            var step = $(this).attr('href');

            if (step != current_step)
                $(current_step).hide();
            current_step = step;
            $(step).show();
            return false;
        });

        $('#next_step1').click(function()
        {
            
           var error = null;

            if ($('input[name="projname"]').val() == null || jQuery.trim($('input[name="projname"]').val()) == '')
            {
                error = '<div class="mws-form-message error">';
                error += "Les champ suivant ne peuvent pas être vide ! ";
                error += "<ul>";
                error += "<li>" + 'Nom du project</li>';
                $('input[name="projname"]').addClass('error');
            }
            else
            {
                $('input[name="projname"]').removeClass('error');
            }

            if ($('input[name="resfile"]').val() == null || $('input[name="resfile"]').val() == '')
            {
                if (error == null)
                {
                    error = '<div class="mws-form-message error">';
                    error += "Les champ suivant ne peuvent pas être vide ! ";
                }
                error += "<li>Resource (zip)</li>";
                error += "<ul></div>";

            }
            if (error != null)
            {
                $('#error_zone').html(error);
                return false;
            }
            else
            {
                $('#error_zone').html('');
            }
            $('#form-upload-svg').submit();
        });
       


        $('#form-upload-svg').ajaxForm(
                {
                    beforeSend: function()
                    {
						$('.upload-progress').show();
						$('.upload-progress .progress-bar').css('width' , 0);
                    },
                    uploadProgress: function(event, position, total, percentComplete)
                    {
                        var w = $('.upload-progress').width() * (percentComplete / 100);
                        $('.upload-progress .progress-bar').css('width' , w);
                    },
                    success: function(data)
                    {
                        var rep = JSON.parse(data);

                        var success = rep.success;
                        if (success == 1)
                        {
                            var list = rep.list;
                            //   $('#liste_menu').html(list);
                            $('a[href="#step2"]').addClass('current');
                            $('#bar div').css('width', '50%');
                            var step = '#step2';
                            if (step != current_step)
                            {
                                $(current_step).hide();
                                $current_step = step
                                $(step).show();
                            }
            
                        $.ajax({
                                url: "<?= base_url('project/constrct_list') ?>",
                                type: 'get',
                                success: function(data)
                                {
                                    $('#step2').html(data);
                                }
                            });



                        }
                        else
                        {
                            if (rep.error == "CAN_NOT_CREATE_DIR")
                            {
                                alert('Project non crée, avec le nom ' + $('#projname').val() + '!\n Veillez saisir un autre nom!');
                                return;
                            }
                            if (rep.error == "CAN_NOT_EXTRACT_ARCHIVE")
                            {
                                alert('Le fichier zip que vous avez uploder n\'a pas pu être extrait !');
                                return;
                            }
                            else
                                error = '<div class="mws-form-message error">';
                                error +="<p>Erreur : </p>";
                                error += "<ul><li>"+rep.error+"</li></p>";
                                $('#error_zone').html( error );
                        }
                    },
                    complete: function(xhr) {
                    	$('.upload-progress').hide();
                        // status.html(xhr.responseText); this will show uploaded file details
                    }
                });

    });

</script>